{% extends 'base.html' %}

{% block body %}

<!--删除模态框-->
<div class="modal fade" id="confirmDeleteModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">是否删除</h4>
      </div>
      <div class="modal-body">
        <p>你确定要删除该用户吗？</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-info" data-dismiss="modal">取消</button>
        <button type="button" id="confirmDeleteButton" class="btn btn-danger">确定</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal --> 

 <!-- 添加普通用户模态框 -->
 <div class="modal fade" id="AddUserModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addModalLabel">添加用户</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form method="POST" action="/user" id="addUserForm">
          {% include 'userForm.html' %}
          <div class="form-group">
            <label>密码</label>
            <input type="password" class="form-control" id = "password" placeholder="密码" name = "password">
          </div>
          <div style="padding: 50px;">
            <a class="btn btn-default" href="/user/list" role="submit" style="float: left">返回</a>
            <input class="btn btn-success" type="submit" style="float: right" value="添加">
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!--修改信息模态-->
<div class="modal fade" id="modifyModal" tabindex="-1" role="dialog" aria-labelledby="modifyModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modifyModalLabel">修改信息</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="modifyForm">
          <input type="hidden" id="userID" name="ID">
          <div class="form-group">
            <label for="remark">备注</label>
            <input type="text" class="form-control" id="userremark" placeholder="备注" name="remark">
          </div>
          <div class="form-group">
            <label for="telephone1">电话1</label>
            <input type="tel" class="form-control" id="usertelephone1" placeholder="电话1" name="telephone1">
          </div>
          <div class="form-group">
            <label for="telephone2">电话2</label>
            <input type="tel" class="form-control" id="usertelephone2" placeholder="电话2" name="telephone2">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="submit-button">保存</button>
      </div>
    </div>
  </div>
</div>

<!--修改密码模态-->
<div class="modal fade" id="passwordModal" tabindex="-1" role="dialog" aria-labelledby="passwordModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <h4 class="modal-title" id="passwordModalLabel">修改密码：</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
          </div>
          <div class="modal-body">
              <form id="passwordForm">
                <input type="hidden" id="ID" name="ID">
                <div class="form-group">
                  <label for="oldPassword">旧密码:</label>
                  <input type="password" class="form-control" id="oldPassword" placeholder="密码" name="oldPassword">
                </div>
                <div class="form-group">
                  <label for="newPassword">新密码:</label>
                  <input type="password" class="form-control" id="newPassword" placeholder="密码" name="newPassword">
                </div>
                <div class="form-group">
                  <label for="confirmPasswordConfirm">确认新密码:</label>
                  <input type="password" class="form-control" id="confirmPassword" placeholder="密码" name="confirmPassword">
                </div>
              </form>
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
              <button type="button" class="btn btn-primary" id="savePasswordButton">保存</button>
          </div>
      </div>
  </div>
</div>

<div class="row">
  <div class="col-md-6 text-left">
    {% if get_user_role() == 2 %}
    <button class="btn btn-info" type="submit" data-toggle="modal" data-target="#AddUserModal">
      <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> 添加用户
    </button>
    {% endif %}
  </div>
  <div class="col-md-6 text-right">
    <button type="button" class="btn btn-primary modify-pas-button" data-toggle="modal" data-target="#passwordModal" data-password-id="{{ get_user_id() }}">
      <span class="glyphicon glyphicon-pencil"></span> 修改密码
    </button>
  </div>
</div>

<table class="table table-hover">
    <thead>
      <tr>
      <th>用户ID</th>
      <th>用户备注</th>
      <th>电话1</th>
      <th>电话2</th>
      <th>账号</th>
      <th>角色</th>
      </tr>
    </thead>
    <tbody >
      {% for user in user_list %}
      <tr>
        <td>{{ user.ID }}</td>
        <td>{{ user.remark }}</td>
        <td>{{ user.telephone1 }}</td>
        <td>{{ user.telephone2 }}</td>
        <td>{{ user.account }}</td>
        <td><span class = "label label-{{role_dict[user.role].cls}}">{{role_dict[user.role].text}}</span></td>
        {% if get_user_role() == 2 %}
        <td><button class="btn btn-warning delete-button" type="button"  data-userid="{{ user.ID }}"><span class="glyphicon glyphicon-remove" aria-hidden="true">删除用户</span></button></td>
        <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modifyModal" data-upuserid="{{ user.ID }}">修改信息</button></td>
        {% endif %}
      </tr>
      {% endfor %}
    </tbody>
  </table>

{% endblock %}
